<template>
    <div class="container">
        <div>
            <van-nav-bar title="就诊人管理" left-arrow @click-left="onClickLeft" />
        </div>
        <div class="patientList">
            <van-contact-card type="add" add-text="添加就诊人" @click="onAdd" />
            <van-popup v-model:show="show" class="addPatient">
                <van-cell-group inset>
                    <van-field v-model="username" label="姓名" placeholder="请输入姓名" />
                    <van-field v-model="phone" label="手机号" placeholder="请输入手机号" />
                    <van-field v-model="age" label="年龄" placeholder="请输入年龄" />
                    <van-field v-model="sex" label="性别" placeholder="请输入性别" />
                </van-cell-group>
                <div class="addbtn">
                    <van-button round block type="primary" @click="show = false" class="cancel">取消</van-button>
                    <van-button round block type="primary" @click="onSubmit">提交 </van-button>
                </div>
            </van-popup>
        </div>

        <div class="patientList" v-for="(item, i) in patientsData" :key="i">
            <van-swipe-cell>
                <van-card :title="'姓名：' + item.name" class="goods-card" > 
                    <template #thumb>
                        <img src="/public/5.png" alt="" class="card_img"/>
                    </template>
                    <template #tags>
                        <p>年龄：{{ item.age }}</p>
                        <p>性别：{{ item.sex }}</p>
                        <p>手机号：{{ item.phone }}</p>
                    </template>
                </van-card>
                <template #right>
                    <van-button square text="删除" type="danger" class="delete-button" @click="DeletePatient(item.id)" />
                    <van-button square text="编辑" type="success" class="edit-button" @click="editPatient(item)" />
                </template>
                <van-divider class="divider" />
            </van-swipe-cell>
        </div>
    </div>
</template>


<script setup>
import { ref, onMounted } from 'vue';
import http from '@/http';
import { useRouter } from 'vue-router';
const router = useRouter();
const isEdit = ref(false);
let id = ref('');
let username = ref('');
let phone = ref('');
let sex = ref('');
let age = ref('');
let patientsData = ref([]);
const show = ref(false);

const onAdd = () => {
    show.value = true;
};

function onSubmit() {
    if (isEdit.value) {
        const params = {
            id: id.value,
            name: username.value,
            phone: phone.value,
            sex: sex.value,
            age: age.value
        };
        http.put(`/patient/patient/${id.value}/`, params).then(res => {
            if (res.status === 200) {
                console.log('就诊人修改成功', res);
                show.value = false;
                getPatientData();
            }
        }).catch(err => {
            console.log('就诊人修改失败', err);
        });
    } else {
        const params = {
            name: username.value,
            phone: phone.value,
            sex: sex.value,
            age: age.value
        };
        http.post('/patient/patient/', params).then(res => {
            if (res.status === 200) {
                console.log('就诊人添加成功', res);
                show.value = false;
                getPatientData();
            }
        }).catch(err => {
            console.log('就诊人添加失败', err);
        });
    }
}

const DeletePatient = (patientId) => {
    http.delete(`/patient/patient/${patientId}/`).then(res => {
        if (res.status === 200) {
            console.log('就诊人删除成功');
            getPatientData();
        }
    }).catch(err => {
        console.log('就诊人删除失败', err)
    });
}

const editPatient = (patient) => {
    show.value = true;
    isEdit.value = true;
    id.value = patient.id;
    username.value = patient.name;
    phone.value = patient.phone;
    age.value = patient.age;
    sex.value = patient.sex;
}


const getPatientData = () => {
    http.get('/patient/patient/').then(res => {
        if (res.status === 200) {
            console.log('就诊人请求成功', res.data.patients);
            patientsData.value = res.data.patients;
        }
    }).catch(err => {
        console.log('就诊人请求失败', err);
    });
};


onMounted(() => {
    getPatientData();
});


const onClickLeft = () => {
    router.push('/mine');
};
</script>
<style scoped>
.container {
    background-color: rgb(232, 239, 252);
    height: 200vh;
}

.addPatient {
    padding: 24px;
    border-radius: 15px;
}

.addbtn,
.editbtn {
    margin: 16px;
}

.card_img{
    width: 80px;
    height: 80px;
    position: absolute;
    left: 10%;
}

.cancel {
    margin-bottom: 16px;
}

.patient_info {
    position: relative;
}

.delete-button,
.edit-button {
    height: 100%;
}

.divider {
    margin: 0;
    color: #ccc;
}
</style>
